<script lang="ts" setup>
import { useFetch } from '@/home/hooks/fetch';
import { useAsyncData } from '@/home/hooks/async-data';
import CustomAvatar from '@/home/components/CustomAvatar.vue';
import Box from './Box.vue';
import Loading from '@/home/components/Loading.vue';
import LoadingBox from '@/home/components/LoadingBox.vue';
import Platform from '@/common/components/platform-avatar/index.vue';

const { $fetch } = useFetch();
const { data: listing, refresh, pending } = useAsyncData(
  'home:organization',
  () => $fetch('/org/hot_orgs', { data: { pageNo: 1, size: 5 } }),
  {
    transform: (data) => data.records ?? [],
  },
);

const changeFocus = async (id: string, isFocus: boolean) => {
  const { isSuccess } = await $fetch(isFocus ? '/org/cancel' : '/org/focus', {
    autoGotoLogin: true,
    data: { orgId: id },
  });

  if (isSuccess) {
    console.log('success');
  } else {
    console.log('fail');
  }

  refresh();
};
</script>

<template>
  <section class="page-home-organization mt-20">
    <Box :title="$t('home.home.organization.title')" :more-text="$t('home.home.organization.more')" more-link="/explore/organization">
      <ul>
        <LoadingBox :loading="pending">
          <template v-if="listing?.length > 0">
            <li v-for="item in listing" :key="item.id" class="group mt-20 flex justify-between border-b-1 border-hex-f7f7f7 pb-20 last:(border-b-0 pb-0)">
              <CustomAvatar :photo="item.avatarUrl" :title="item.name" class="size-52" />

              <div class="w-248">
                <div class="flex items-center justify-between gap-x-12">
                  <div class="flex-y-center gap-x-4">
                    <a :href="item.jump" target="_blank">
                      <div class="line-clamp-1 max-w-160 break-anywhere text-16 color-hex-292929 font-500 leading-28 group-hover:(color-hex-345de2)">{{ item.name }}</div>
                    </a>
                    <Platform class="shrink-0" :platform="item.platform" icon-class="size-16" tooltip />
                  </div>
                  <button
                    type="button"
                    class="h-28 w-72 flex-shrink-0 border-1 border-hex-345de2 rounded-6 bg-hex-ffffff text-center text-12 color-hex-345de2 leading-28 hover:(bg-hex-345de2 color-hex-fff)"
                    @click="changeFocus(item.id, item.isFocus)"
                    v-if="!item.focusButtonDisabled"
                  >
                    {{ item.isFocus ? $t('home.common.follow.cancel') : $t('home.common.follow.ok') }}
                  </button>
                </div>

                <p class="line-clamp-2 mt-6 h-44 text-14 color-hex-575757 font-400" :title="item.description">{{ item.description }}</p>

                <div class="mt-10 flex items-center justify-between">
                  <a v-for="(piece, index ) in item.warehouseList" :key="index" class="flex-y-center text-12 color-hex-575757 font-400" :href="piece.jump" target="_blank">
                    <div class="i-icons:repository mr-4 size-16"></div>
                    <div class="line-clamp-1 h-16 w-94">{{ piece.warehouseName }}</div>
                  </a>
                </div>
              </div>
            </li>
          </template>
          <template v-else>
            <li class="mt-20 text-center color-hex-8b8b8b">{{ $t('home.common.emptyContent') }}</li>
          </template>

          <template #loading>
            <li class="mt-20 flex-x-center">
              <Loading class="size-16 color-hex-8b8b8b" />
            </li>
          </template>
        </LoadingBox>
      </ul>
    </Box>
  </section>
</template>

<style lang="scss" scoped>
</style>
